<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<!-- TopJUI框架样式 -->
<link type="text/css" href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="../../topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme" />
<!-- FontAwesome字体图标 -->
<link type="text/css" href="../../statics/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- layui框架样式 -->
<link type="text/css" href="../../statics/plugins/layui/css/layui.css" 	rel="stylesheet" />
<!-- jQuery相关引用 -->
<script type="text/javascript" src="../../statics/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../statics/plugins/jquery/jquery.cookie.js"></script>
<!-- TopJUI框架配置 -->
<script type="text/javascript" src="../../statics/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心-->
<script type="text/javascript" src="../../topjui/js/topjui.core.min1.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
<!-- layui框架js -->
<script type="text/javascript" src="../../statics/plugins/layui/layui.js" charset="utf-8"></script>

<script>
var POSID='';
</script>
</head>
<body>
	<div data-toggle="topjui-layout" data-options="fit:true">
		<div
			data-options="region:'center',title:'',fit:true,split:true,border:false">
			<!-- datagrid表格 -->
			<table data-toggle="topjui-datagrid" class="productDg1"
				data-options="id: 'propDg',
               				fitColumns:true,
              				remoteSort:false,
               				method:'get',
               				url: '/prop/queryProp'">
				<thead>
					<tr>
						<th data-options="field:'reletime',title:'发布时间',sortable:true,width:100,align:'center'"></th>
						<th data-options="field:'title',title:'标题',sortable:true,width:200"></th>
						<th data-options="field:'proptypenameStr',title:'板块',sortable:true,width:100,align:'center'"></th>
						<th data-options="field:'operate',title:'操作',formatter:operateFormatter,width:100"></th> 	
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<!-- layout布局 结束 -->

	<!-- 表格工具栏开始 -->
	<div id="propDg-toolbar" class="topjui-toolbar"
		data-options="grid:{
           type:'datagrid',
           id:'propDg'
       }">
       <a href="javascript:void(0)" data-toggle="topjui-menubutton"
			data-options="iconCls: 'fa fa-plus',btnCls:'topjui-btn-blue'" onclick="openAddDiag()">新增</a>
		<form id="queryForm" class="search-box">
		
			<input type="text" name="stime" data-toggle="topjui-datebox"
				data-options="id:'stime',prompt:'开始日期',width:250">
			<!-- 原测试用代替的普通文本框代码
			<input type="text" name="stime" data-toggle="topjui-textbox"
				data-options="id:'stime',prompt:'开始日期',width:150">
			<input type="text" name="etime" data-toggle="topjui-textbox"
				data-options="id:'etime',prompt:'截止日期',width:150">
			 -->
			<input type="text" name="etime" data-toggle="topjui-datebox"
				data-options="id:'etime',prompt:'截止日期',width:250">
			
			<input type="text" name="title" data-toggle="topjui-textbox"
				data-options="id:'title1',prompt:'标题',width:200,validType:'maxLength[30]'">
				
                           
             <input type="text" name="proptypeid"
                   data-toggle="topjui-combobox"
                   data-options="required:false,
               prompt:'板块',
               width:200,
               valueField:'id',
               textField:'text',
               method:'get',
	           panelHeight:250,
               onLoadSuccess:function(data){
               	
               },
               url:'/prop/queryProptype'">
                      	
			<a href="javascript:void(0)" data-toggle="topjui-menubutton"
				data-options="method:'query',
           					iconCls:'fa fa-search',
           					btnCls:'topjui-btn-blue',
           					form:{id:'queryForm'},
           					grid:{type:'datagrid','id':'propDg'}">查询</a>
		</form>
	</div>

	<!-- 表格工具栏结束 -->

	<script>
	
	function openAddDiag(){
		ID = '';
		var $addDialog = $('<form id="propDg-add"  style="width: 900px; height:500px; margin: auto; display: none;"></form>');
		var diag = $addDialog.dialog({
		    title: '宣传信息新建',
		    href: '/web/view/prop/prop_add.html',
		    modal: true,
		    resizable:true,
 		    maximizable:true,
		    collapsible:true,
		    buttons:[{
				text:'保存',
				handler:function(){
					if($('#propDg-add').form('validate')) {
						var formData = $("#propDg-add").serialize();
						var url = '/prop/insertProp';
						var proptypeid = $('#proptypeid').val();
						var photo = $('#photo').val();
						var title = $('#title').val();
						var subtitle = $('#subtitle').val();
						var data ={
							proptypeid:proptypeid,
							photo:photo,
							title:title,
							subtitle:subtitle,
						//	propid:ID,
							content:ue.getContent()
						};
			            $.post(url,data,function (res,status) {
			                if (status == 'success') { // 后台返回状态值
			                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
			                    $("#propDg").iDatagrid('reload');// 刷新下表格数据
			                    diag.dialog("destroy");// 销毁dialog面板
			                } else {
			                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
			                }
			            },'JSON');
					}
				}
			},{
				text:'关闭',
				handler:function(){diag.dialog("destroy");}
			},{
				text:'预览',
				handler:function(){
					//alert("将会调用编辑组件的预览方法");
					var yulan = window.open ("","","height=600,width=400,top=50,left=300,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no");
					yulan.document.write(ue.getContent());
				}
			}],onClose: function () {
                $(this).dialog('destroy');//销毁
            }
		});
		$addDialog.dialog('open');
		
	}
	
	//表头“操作”栏，formatter定义，这里面可以自定义按钮样式
	//row = {authShowStr: "系统管理 , 部门管理... ", createpropid: "1", id: "1", isdel: "0", propname: "管理员"}
	function operateFormatter(value, row, index) {
		debugger;
        var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.id + '\')">编辑</button>';
        htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.id + '\')">删除</button>';
        return htmlstr;
    }
	function deleteRow(id){
		debugger;
		$.messager.confirm("操作提示", "删除用户将会删除与之关联的一切信息！是否删除？", function (data) {
			if(data) {
				$.post("/prop/delProp",{"propid":id},function(res,status){
					 if (status == 'success') { // 后台返回状态值
		                 $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
		                 $("#propDg").iDatagrid('reload');// 刷新下表格数据（propDg是上面数据表格的id）
		                 $('#propAddDialog').iDialog('destroy');// 销毁dialog面板
		             } else {
		                 $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
		             }
				},'JSON');
			}else {}
		});
	}
	
	//打开编辑页面
	var ID = "";//定义全局变量用于保存当前角色id
	function openEditDiag(id){
		debugger;
		ID = id;
		$.ajax({ url: "/prop/queryPropById?propid="+ID, 
 			type:"get",dataType:"json", success: function(data){
 			openDialog(data.data);//调用下面的用于回显的打开对话框函数
		 }}); //调用下面的函数时只提供了返回的prop对象，并没有authids的数组，这个怎么处理呢？？？
	}
	
	//由openEditDiag(id)函数末尾调用
	function openDialog(d){
		debugger;
		var $updateDialog = $('<form id="propDg-update"  style="width: 900px; height: 500px; margin: auto; display: none;"></form>');
		var diag = $updateDialog.dialog({
		    title: '宣传信息编辑',
		    href: '/web/view/prop/prop_add.html',
		    modal: true,
		    resizable:true,
 		    maximizable:true,
		    collapsible:true,
		    buttons:[{
				text:'保存',
				handler:function(){
					if($('#propDg-update').form('validate')) {
						  var formData = $("#propDg-update").serialize();
						  var url = '/prop/updateProp';
							var proptypeid = $('#proptypeid').val();
							var photo = $('#photo').val();
							var title = $('#title').val();
							var subtitle = $('#subtitle').val();
							var data ={
								proptypeid:proptypeid,
								photo:photo,
								title:title,
								subtitle:subtitle,
								propid:ID,
								content:ue.getContent()
							};
							$.ajax({
								type : "post",//向后台请求的方式，有post，get两种方法
								url : url,//url填写的是请求的路径
// 								cache : false,//缓存是否打开
								data : data,
								dataType : 'json',//请求的数据类型
								success : function(res,status) {//请求的返回成功的方法
									if (status == 'success') { // 后台返回状态值 	
	 				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
 				                   		 $("#propDg").iDatagrid('reload');// 刷新下表格数据
	 				                    diag.dialog("destroy");// 销毁dialog面板
	 				                } else {
	 				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
	 				                }
								},
								error : function(XMLHttpRequest, textStatus, errorThrown) {//请求的失败的返回的方法
									//alert("删除失败，请稍后再次尝试删除！");
								}
							});
					  }
				}
			},{
				text:'关闭',
				handler:function(){diag.dialog("destroy");}
			},{
				text:'预览',
				handler:function(){
					//alert("将会调用编辑组件的预览方法");
					var yulan = window.open ("","","height=600,width=400,top=50,left=300,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no");
					yulan.document.write(ue.getContent());
				}
			}],onClose: function () {
                $(this).dialog('destroy');//销毁
            },onLoad :function(){
//         		debugger;
            	$('#propDg-update').form('load',d);//回显数据
            	 //var htmlStr = $("#editorValue").val();
           		ue.ready(function() {
           		    ue.setContent(d.content, false);
           		});
           		
            	//下面是补充的回显图片代码
            	var innerForm=$('#propDg-update');
            	innerForm.find("img").each(function(i){ 
            		$(this).attr("src",d.photo);
            		debugger;
            	});	
           		
            }
		});
		$updateDialog.dialog('open');
	}
</script>


</body>
</html>